<template>
	<view>同时调用多个接口</view>
	<view>获取Banner</view>
	<view v-for="(item, index) in banners" :key="index" class="testimagbox">
		<image :src="item.pic" mode="aspectFill" class="banner-image"></image>
	</view>
	
	
	<view>获取pdd商品</view>
	<view class="shop">
		<view v-for="(item, index) in shops" :key="index" class="shopbox">
			<image class="shopimg" :src="item.brand_logo"></image>
			<view class="shopname">{{item.brand_name}}</view>
		</view>
	</view>


	<view>获取tb商品</view>
	<view class="shop">
		<view v-for="(item, index) in tbs" :key="index" class="shopbox">
			<image class="shopimg" :src="item.brand_logo"></image>
			<view class="shopname">{{item.brand_name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shops: [],
				banners: [],
				tbs: [],
			};
		},
		mounted() {
			this.fetchData();
		},
		methods: {
			async fetchData() {
				try {
					// 使用 Promise.all 同时调用多个接口
					const [bannersResponse, shopsResponse, tbsResponse] = await Promise.all([
						this.getBanner(),
						this.getShop(),
						this.getTb()
					]);

					// 处理响应数据
					if (bannersResponse && bannersResponse.data) {
						this.banners = bannersResponse.data.data;
					} else {
						console.error('没有收到Banner数据:', bannersResponse);
					}

					if (shopsResponse && shopsResponse.data) {
						this.shops = shopsResponse.data.data;
					} else {
						console.error('没有收到pdd数据:', shopsResponse);
					}
					if (tbsResponse && tbsResponse.data) {
						this.tbs = tbsResponse.data.data;
					} else {
						console.error('没有收到的商品数据:', tbsResponse);
					}
				} catch (err) {
					console.error('请求失败:', err);
				}
			},
			async getBanner() {
				const response = await this.$myRequest({
					url: '/index/getBanner',
					data: {
						login_devid: '',
						admin_userid: '1',
						appid: '',
					}
				});
				return response;
			},
			async getShop() {
				const response = await this.$myRequest({
					url: 'index/getJdPddBrand',
					data: {
						cate_id: '1',
						source_type: 'pdd',
					}
				});
				return response;
			},
			async getTb() {
				const response = await this.$myRequest({
					url: 'index/getBrandCate',
					data: {
						// cate_id: '1',
						// source_type: 'tb',
					}
				});
				return response;
			},
		}
	}
</script>

<style>
	.testimagbox {
		width: 100%;
	}

	.banner-image {
		height: 15vh;
		display: block;
		margin: 0 auto;
	}

	.shop {
		padding: 2%;
		display: flex;
		flex-wrap: wrap;
		gap: 2%;
	}

	.shopbox {
		width: 48%;
	}

	.shopname {
		font-size: 15px;
		text-align: center;
	}

	.shopimg {
		width: 100%;
		height: 150px;
	}
</style>
